<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo11-深入组件-prop-model</title>
</head>
<script src="../libs/vue.js"></script>
<body> 
    <div id="app"> 
      <div>

        <base-checkbox v-model="lovingVue" text="是否选中"></base-checkbox>
      </div> 
    </div>
</body>
<script>
Vue.config.productionTip = false;
Vue.component('base-checkbox', {
  model: {
    prop: 'ccc',  // 原：checked
    event: 'change'
  },
  props: {
    ccc: Boolean,
    text: String 
  },
  template: `
    <div>
      <input
      type="checkbox"
      v-bind:checked="ccc"
      v-on:change="$emit('change', $event.target.checked)"
      >{{ text }} - {{ ccc }}
      <button v-on:click="showListener">查看$listeners</button>
      <button v-on:click="triggerEvent">通过$listeners执行组件上的事件</button>
    </div>
  `,
  methods:{
    showListener:function(){
      console.log(this.$listeners);
    },
    triggerEvent:function(){
      /**
       * https://cn.vuejs.org/v2/guide/components-custom-events.html
       * 【将原生事件绑定到组件】章节
       * 
       * 发现新大陆：这样也行！！！ 
       */ 
      this.$listeners['change'](!this.ccc)
    }
  }
});

var app = new Vue({
  el: '#app',
  data:{
    lovingVue: true 
  }
});

</script>
</html>